<template>
<div class="home-page">
        <h3>设备统计</h3>
        <el-divider></el-divider>
       <div class="equipment_statistics" >
         <el-col :span="4">
           <el-card shadow="hover" :body-style="{padding:'10px'}">
             <h4>
               <svg class="icon" aria-hidden="true">
                 <use xlink:href="#el-ali-dianbiaoguanli"></use>
               </svg>
               设备总数</h4>
             <h5  > <a @click="copy(EquipmentStatistical.total,'设备总数')">{{EquipmentStatistical.total}}</a> 台 </h5>
           </el-card>
         </el-col>
         <el-col :span="4">
           <el-card shadow="hover" :body-style="{padding:'10px'}">
              <h4>
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#el-ali-zaixian1"></use>
                </svg>
                在线设备</h4>
             <h5  > <a @click="copy(EquipmentStatistical.online,'在线设备')">{{EquipmentStatistical.online}} </a>台 </h5>
           </el-card>
         </el-col>
         <el-col :span="4">
           <el-card shadow="hover" :body-style="{padding:'10px'}">
             <h4>
               <svg class="icon" aria-hidden="true">
                 <use xlink:href="#el-ali-alarm"></use>
               </svg>
               报警设备</h4>
             <h5  > <a @click="copy(EquipmentStatistical.alarmEquipment,'报警设备')">{{EquipmentStatistical.alarmEquipment}}</a> 台 </h5>
           </el-card>
         </el-col>
         <el-col :span="4">
           <el-card shadow="hover" :body-style="{padding:'10px'}">
             <h4>
               <svg class="icon" aria-hidden="true">
                 <use xlink:href="#el-ali-lixian"></use>
               </svg>
               离线设备</h4>
             <h5  > <a @click="copy(EquipmentStatistical.offline,'离线设备')">{{EquipmentStatistical.offline}}</a> 台 </h5>
           </el-card>
         </el-col>
       </div>
        <h3>缴费记录</h3>

        <el-divider></el-divider>
        <div class="payCostStatistics">
          <el-col :span="4">
            <el-card shadow="hover" :body-style="{padding:'10px'}">
              <h4>
                <svg class="icon" aria-hidden="true">el-ali-tuichu
                  <use xlink:href="#el-ali-zhifuchenggong"></use>
                </svg>
                已缴费</h4>
              <h5> <a @click="copy(PayStatistical.haveToPay,'已缴费')">{{PayStatistical.haveToPay}}</a> 台 </h5>
            </el-card>
          </el-col>
          <el-col :span="4"  >
            <el-card shadow="hover"  :body-style="{padding:'10px'}">
              <h4>
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#el-ali-cuowu"></use>
                </svg>
                未缴费</h4>
              <h5> <a @click="copy(PayStatistical.didNotPay,'未缴费')">{{ PayStatistical.didNotPay }}</a> 台 </h5>
            </el-card>
          </el-col>
        </div>
</div>
</template>

<script>
export default {
  name: "homePage",
  data(){
    return{
    EquipmentStatistical:{
      total:23456,
      online:13567,
      alarmEquipment:3,
      offline:9886
    },
      PayStatistical:{
        haveToPay:19234,
        didNotPay:4222,
      }
   }
  },
  methods:{
    copy(num,name){
      let text = `${name} : ${num} 台`;
      navigator.clipboard.writeText(text).then(() => {
        this.$message.success('复制成功')
      })
    }
  }
}
</script>

<style scoped>
.home-page{
  min-width: 584px;
}
.equipment_statistics{
  display: flex;
  justify-content: space-around;
  padding: 10px 10px;
  position: relative;
  margin:  10px auto;
  user-select:none;
}
.el-col{
  text-align: center;
  margin: 10px;
  width: 150px;
}
.payCostStatistics {
  flex-direction: row;
  padding: 10px 10px;
  user-select: none;
  display: flex;
  justify-content: center;
}
 a{
  color: #409EFF;
}
</style>
